<template>
	<div class="custom-table">
		<!-- max-height="500" -->
		<el-table :data="tableData" stripe border @sort-change="onSortChange" row-key="id"
			:tree-props="{ children: 'child', hasChildren: 'hasChildren' }" :default-expand-all="false"
			:header-cell-style="headerCellStyle">
			<el-table-column v-if="is_show_table_select" type="selection" width="40">
			</el-table-column>
			<!-- 数据循环体 -->

			<el-table-column v-for="(item, index) in table_columns" :key="item.field" :prop="item.field"
				:label="item.field_title" :width="item.table_width" :sortable="item.field_sortable"
				:show-overflow-tooltip="item.field_show_overflow_tooltip">
				<template slot-scope="scope">
					<!-- {{ scope.row }} -->
					<!-- scope.row[item.field] -->
					<div class="render-type render-text"
						v-if="!item.table_render_type || item.table_render_type == 'text'">
						{{ scope.row[item.field] }}
					</div>
					<div class="render-type render-tag" v-else-if="item.table_render_type == 'tag'">
						<template
							v-if="table_column_tag_map && table_column_tag_map[item.field] && table_column_tag_map[item.field][scope.row[item.field]]">
							<el-tag :type="table_column_tag_map[item.field][scope.row[item.field]].type"> {{
								table_column_tag_map[item.field][scope.row[item.field]].title }}</el-tag>
						</template>
					</div>
					<div class="render-type render-image" v-else-if="item.table_render_type == 'image'">
						<el-image style="width: 30px; height: 30px" :src="scope.row[item.field]"
							:preview-src-list="[scope.row[item.field]]">
						</el-image>
					</div>
					<div class="render-type render-image-list" v-else-if="item.table_render_type == 'image-list'">

					</div>
					<div class="render-type render-file" v-else-if="item.table_render_type == 'file'">

					</div>
				</template>
			</el-table-column>

			<!-- 操作 -->
			<el-table-column v-if="table_row_actions.length" fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<div class="row-action-list" v-if="scope.row.is_allow_table_row_actions != -1">
						<div class="row-action-item" v-for="(action_item, aIndex) in table_row_actions"
							v-if="(!action_item.condition || scope.row[action_item.condition.field] == action_item.condition.field_value)"
							:data-type="action_item.type || ''">
							<el-button v-if="action_item.title != '更多'"
								@click="doTableRowAction(action_item, scope.row)" type="text">{{ action_item.title
								}}</el-button>

							<el-dropdown v-else-if="action_item.title == '更多'"
								@command="(title) => doTableRowAction({ title: title }, scope.row)">
								<el-button type="text">更多</el-button>

								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item v-for="(sub_item, sindex) in action_item.child" :key="sindex"
										:command="sub_item.title">
										{{ sub_item.title }}
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>

						<!-- 列表操作 -->
						<!-- <div class="row-action" v-if="tableRowActionButtons.includes('编辑')">
                <el-button @click="handleTableRowEdit(scope.row)" type="text"
                  >编辑</el-button
                >
              </div>

              <div class="row-action" v-if="tableRowActionButtons.includes('删除')">
                <el-button @click="handleTableRowDelete(scope.row)" type="text"
                  >删除</el-button
                >
              </div>

              <div class="row-action" v-if="tableRowActionButtons.includes('更多')">
                <el-dropdown
                  @command="(command) => handleTableRowCommand(command, scope.row)"
                >
                  <el-button type="text">更多</el-button>

                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(sub, sindex) in tableRowMoreActions"
                      :key="sindex"
                      :command="sub.title"
                      >{{ sub.title }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div> -->
					</div>
				</template>
			</el-table-column>
			<!-- 操作 -->
		</el-table>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	name: "form-select",
	components: {},
	props: {
		not_use_tableData: { //表单数据
			type: Array,
			default: function () {
				return [
					// {
					//     id: '1',
					//     title: '张三',
					// }
				];
			},
		},
		not_use_table_columns: { //表单列配置
			type: Array,
			default: function () {
				return [
					// {
					//     column: "roleId",
					//     field_title: "ID",
					//     table_width: "auto",
					//     column_sortable: false, //是否可排序
					//     column_show_overflow_tooltip: false, //悬浮是否展示提示
					//     table_render_type: '',//'' || text || tag || image || image-list || file
					// }
				];
			},
		},
		not_use_table_row_actions: { //表单行操作
			type: Array,
			default: function () {
				return [{
					title: '编辑',
				},
				{
					title: '删除',
				},
					// {
					//   title: '更多', 
					//   child: [
					//     {
					//       title: "设为热搜",
					//     },
					//     {
					//       title: "查看评论",
					//     },
					//   ]
					// },
				];
			},
		},
		not_use_radio_options_map: { //表格标签设置
			type: Object,
			default: function () {
				return {
					// {
					//     status: [
					//         {
					//             title: '正常',
					//             value: 0,
					//             type: '',
					//         },
					//         {
					//             title: '停用',
					//             value: 1,
					//             type: 'info',
					//         },
					//     ]
					// }
				}
			},
		},
		is_show_table_select: { //展示表格行是否允许勾选
			type: Boolean,
			default: false
		},
		is_show_table_action: { //展示表格行是否允许操作
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			tableData: [],
			table_columns: [],
			table_row_actions: [],
			radio_options_map: {},

			table_column_tag_map: {}
		};
	},
	computed: {
		// table_column_tag_map() {
		// 	let tag_map = {}
		// 	for (var col in this.radio_options_map) {
		// 		tag_map[col] = {};
		// 		let radio_list = this.radio_options_map[col]
		// 		radio_list.forEach(radio_item => {
		// 			tag_map[col][radio_item.value] = radio_item;
		// 		})
		// 	}
		// 	return tag_map

		// }
	},
	created() {

	},
	methods: {
		// 初始化表格数据
		initTableData(option) {
			this.tableData = option.tableData || [];
		},
		// 初始化配置
		initTableConfig(option) {
			console.log('初始化 w_table配置', option)

			this.table_columns = option.table_columns || [];
			this.table_row_actions = option.table_row_actions || [];
			this.radio_options_map = option.radio_options_map || {};


			this.table_column_tag_map = this.set_table_column_tag_map()

			this.$log('设置 table_column_tag_map', this.table_column_tag_map)
		},
		set_table_column_tag_map() {
			let tag_map = {}
			for (var field in this.radio_options_map) {
				tag_map[field] = {};
				let radio_list = this.radio_options_map[field]
				radio_list.forEach(radio_item => {
					tag_map[field][radio_item.value] = radio_item;
				})
			}
			return tag_map
		},
		//设置表格配置结束
		headerCellStyle() {
			return {
				'font-size': '14px',
				'font-weight': 'bold',
				'color': '#333e50',
			};
		},
		onSortChange({
			column,
			prop,
			order
		}) {
			//'ascending' 升序
			//'descending' 降序
			console.log(" column, prop, order");
			console.log(column, prop, order);
		},

		// 表格行操作
		doTableRowAction(action_item, table_row) {
			console.log('doTableRowAction');
			this.$log('action_item', action_item)
			this.$log('table_row', table_row)


			this.$emit('emitTable', {
				action_item: action_item,
				table_row: table_row,
			})
		},
	},
};
</script>
<style lang="css">
.el-tooltip__popper {
	font-size: 13px;
	max-width: 30%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.render-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
<style scoped lang="less">
.row-action-list {
	text-align: center;
	.flex-center();

	.row-action-item {
		&+.row-action-item:before {
			content: "";
			display: inline-block;
			width: 2px;
			height: 12px;
			background: #aaa;
			margin: 0 12px;
			margin: 0 6px;
			position: relative;
			top: 2px;
		}
	}

	.divider {}
}


.render-type {
	display: inline-flex;
}
</style>